<template>
    <div class="aui-flexView">
        <div class="aui-navBar aui-navBar-fixed"></div>
	<div class="aui-scrollView">
		<div class="aui-sign-head">
			<img src="../../assets/login/head.png" alt="">
		</div>
		<div class="aui-sign-form">
				<div class="aui-flex">
					<i class="icon icon-phone"></i>
					<div class="aui-flex-box">
						<input type="text" v-model="phone" autocomplete="off" placeholder="输入手机号码">
					</div>
				</div>
				<div class="aui-flex">
					<i class="icon icon-code"></i>
					<div class="aui-flex-box">
						<input type="password"  v-model="codes" autocomplete="new-password" placeholder="输入密码">
					</div>
				</div>

				<button class="aui-sign-login" @click="gotobinding">立即登录</button>
				<div class="aui-flex aui-flex-clear">
					<div class="aui-flex-box">
                        <router-link to="/appresign">
                            还没有账号？<span class="resignBtn">去注册</span>
                        </router-link>
					</div>
					<div class="aui-links">
                         <router-link to="/findpwd">
                         <span class="findPwdBtn">忘记密码</span>
                        </router-link>
					</div>
				</div>
		</div>

    </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      codes: "",
      dtid: this.$route.query.dtid //扫码期数编码
    };
  },
  mounted() {
    window.localStorage.clear() //先清除
    this.getlode();
  },
  methods: {
    //初始化获取扫码信息
    getlode() {
      //没有课堂编码
      if (this.dtid == undefined||this.dtid ==""||this.dtid==null) {
        this.$router.push("apperror");//跳转到错误页
        return false;
      } else {
        //信息状态保持
        localStorage.setItem("dt_id", this.dtid); //加到本地
      }
    },
    //登录事件
    gotobinding() {
      if (this.phone.trim() === "") {
        this.$message({
          message: "手机号不能为空！",
          type: "warning",
          center: "true",
          offset: 300
        });
        return false;
      }
      if (this.codes.trim() === "") {
        this.$message({
          message: "密码不能为空！",
          type: "warning",
          center: "true",
          offset: 300
        });
        return false;
      }
      this.$axios
        .get("/AppLogin?phone=" + this.phone + "&codes=" + this.codes)
        .then(Json => {
          if (Json.data === 2) {
            this.$message({
              message: "该用户不存在！请先注册！",
              type: "warning",
              center: "true",
              offset: 300
            });
            return false;
          }
          if (Json.data === 3) {
            this.$message.error("密码输入错误！！");
            return false;
          }
          this.$message({
            message: "登录成功！！",
            type: "success",
            center: "true",
            offset: 300
          });
          this.$store.commit('logname',Json.data.student.St_Phone); 
          this.$store.commit('logtoken',Json.data.token); // token
          localStorage.setItem(
            "studentinfo",
            JSON.stringify(Json.data.student)
          ); //登录人信息
          // localStorage.setItem("logininfo", Json.data.student.St_Phone); //登录人名称
          this.$router.push("appmain");
        })
        .catch(error => {
          this.$message.error("登录信息错误！请稍尝试");
        });
    }
  }
};
</script>
<style scoped>
html,
body {
  color: #333;
  margin: 0;
  height: 100%;
  font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, Verdana,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: normal;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #000;
}

a,
label,
button,
input,
select {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

img {
  border: 0;
}

body {
  background: #ededed;
  color: #666;
}

html,
body,
div,
dl,
dt,
dd,
ol,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
button,
fieldset,
form,
input,
legend,
textarea,
th,
td {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #08acee;
}

button {
  outline: 0;
}

img {
  border: 0;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  outline: none;
}

li {
  list-style: none;
}

a {
  color: #666;
}

.clearfix::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.divHeight {
  width: 100%;
  height: 10px;
  background: #f5f5f5;
  position: relative;
  overflow: hidden;
}

.aui-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 15px;
  position: relative;
}

.aui-flex-box {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: #333;
}

/* 必要布局样式css */

.aui-flexView {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.aui-scrollView {
  width: 100%;
  height: 100%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  position: relative;
  margin-top: -44px;
}
.icon {
  width: 20px;
  height: 20px;
  display: block;
  border: none;
  float: left;
  background-size: 20px;
  background-repeat: no-repeat;
}

.icon-return {
  background-image: url("");
}

.aui-sign-head {
  width: 100%;
  position: relative;
  height: auto;
}

.aui-sign-head img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
}

.aui-sign-form {
  width: 92%;
  background-color: white;
  box-shadow: 0 3px 9px #cfcfcf;
  border-radius: 5px;
  margin: -5rem auto;
  z-index: 1;
  position: relative;
  padding: 1.5rem 1rem;
}

.aui-sign-form .aui-flex {
  border: 1px solid #cccccc;
  border-radius: 2px;
  margin: 1.2rem 0;
  padding: 0.2rem 0 0.2rem 0.3rem;
}
.aui-sign-form .aui-flex input {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  background: none;
  border: none;
  font-size: 0.89rem;
}
.aui-sign-login {
  width: 100%;
  color: #fff;
  font-size: 0.98rem;
  border-radius: 22px;
  background-color: #5f8cd0;
  border: none;
  height: 2.5rem;
  line-height: 2.5rem;
}

.aui-code {
  padding-right: 1rem;
}

.aui-sign-form .aui-code input {
  color: #999999;
  font-size: 0.85rem;
}

.icon-phone {
  background-image: url("");
}

.icon-code {
  background-image: url("");
}

.aui-sign-form .aui-flex-clear {
  border: none;
}

.aui-sign-form .aui-flex-clear a {
  color: #999999;
  font-size: 0.85rem;
}
.resignBtn,
.findPwdBtn {
  color: red;
}
</style>
